<template>
	<view class="flex flex-col h-full">
		<scroll-view scroll-y="true" class="flex-1">
			<view class="" v-if="step == 1">
				<view class="mb-20">
					<text class="text-sm font-bold">您的具体问题是:</text>
					<uni-easyinput class="mt-20" type="textarea" autoHeight v-model="formData.problem"
						placeholder="我最近总是觉得做什么都没干劲总觉得自己很无能，想知道自己是不是抑郁了."></uni-easyinput>
				</view>
				<view class="flex mb-20">
					<view class="p-20 bg-[#BBE4FF] text-center rounded-full" @click="handleChooseStart">填写或选择我的星图</view>
				</view>
				<view class="mb-20">
					<text class="text-sm font-bold">补充说明:</text>
					<uni-easyinput class="mt-20" v-model="formData.replenishment" placeholder="总是听到一些奇怪的声音。"></uni-easyinput>
				</view>
				<view class="mb-20">
					<text class="text-sm font-bold">例如:</text>
					<view class="bg-[#F0F3F4] p-20 text-[#666666] mt-20">总是听到一些奇怪的声音。</view>
				</view>
			</view>
			<view class="" v-if="step == 2">
				<sendSettingVue :isCard="isCard"></sendSettingVue>
			</view>
			<view class="" v-if="step == 3">
				<payCompVue @send="handleSend"></payCompVue>
			</view>
		</scroll-view>
		<view class="pt-30" v-if="step!==3">
			<button type="primary" class="rounded-full" @click="onSave">确定</button>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		inject,
		watch,
		computed
	} from 'vue';
	import radioCompVue from '@/components/radioComp.vue';
	import sendSettingVue from './sendSetting.vue';
	import payCompVue from './payComp.vue';
	const pretList = inject('pretList')
	const systemSetting = inject('systemSetting')
	const postFrom = inject('postFrom')
	const step = inject('step')

	const emit = defineEmits(['update', 'send'])

	const payPrice = computed(() => {
		if (postFrom.value.sec == 1) {
			return postFrom.value.sinpay * postFrom.value.pret * 1 + 12
		} else {
			return postFrom.value.sinpay * postFrom.value.pret * 1
		}
	})

	const selcard = ref("") // 星图档案ID字符串
	const starsts = ref("") // 单人星图/双人星图
	const formData = ref({
		problem: '',
		replenishment: '',
	})
	const replenishment = ref("") // 补充
	const isCard = ref(false) // 是否为卡牌区

	const handleSend = () => {
		emit('send')
	}

	const handleChooseStart = () => {
		uni.$once('choose', (chooses) => {
			console.log(chooses)
			selcard.value = chooses.join(',')
			starsts.value = chooses.length == 2 ? 1 : 0
		})
		uni.navigateTo({
			url: `/pages/views/starChart`
		})
	}

	const onSave = () => {
		if (step.value == 1) {
			if (formData.value.problem == '') {
				uni.showToast({
					icon: "none",
					title: "请填写您的问题！"
				})
				return
			}
			if (selcard.value == '') {
				uni.showToast({
					icon: "none",
					title: "请填写或选择星图！"
				})
				return
			}
		} else if (step.value == 2) {
			if (postFrom.value.sinpay == '') {
				uni.showToast({
					icon: "none",
					title: "请选择打赏金额！"
				})
				return
			}
			if (postFrom.value.pret == 0) {
				uni.showToast({
					icon: "none",
					title: "请选择解读人数！"
				})
				return
			}
		}
		const obj = {
			describe: formData.value.problem,
			replenishment: formData.value.replenishment,
			selcard: selcard.value,
			starsts: starsts.value,
		}
		console.log(obj)
		emit("update", obj)
	}
</script>

<style lang="scss" scoped>
	:deep(.uni-easyinput__content) {
		background-color: #F0F3F4 !important;
		border-radius: 10rpx !important;
	}
</style>